<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="交易类型" prop="bizType">
        <el-select
          v-model="queryParams.bizType"
          placeholder="订单状态"
          disabled
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in bank_payment_biz_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="交易银行" prop="gateway">
        <el-input
          v-model="queryParams.gateway"
          placeholder="请输入交易银行"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="交易状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="订单状态"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in bank_payment_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="交易对象" prop="object">
        <el-select
          v-model="queryParams.object"
          placeholder="订单状态"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in bank_payment_object"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="对象编号" prop="objectNo">
        <el-input
          v-model="queryParams.objectNo"
          placeholder="请输入对象编号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="交易流水号" prop="paymentTradeNo" label-width="90">
        <el-input
          v-model="queryParams.paymentTradeNo"
          placeholder="请输入交易流水号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户全称" prop="fullName">
        <el-input
          v-model="queryParams.fullName"
          placeholder="请输入客户全称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户简称" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入客户简称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="交易创建时间" prop="createTimes" label-width="100">
        <el-date-picker
          v-model="queryParams.createTimes"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date(2023, 2, 1, 0, 0,0,0), new Date(2023, 2, 5, 23, 59,59,0)]"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="交易完成时间" prop="complateTimes" label-width="100">
        <el-date-picker
          v-model="queryParams.complateTimes"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date(2023, 2, 1, 0, 0,0,0), new Date(2023, 2, 5, 23, 59,59,0)]"
          align="right"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="search" size="mini" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['yanjing:payment:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="paymentList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column
        label="客户名称"
        align="center"
        prop="companyName"
        min-width="140"
      />
      <el-table-column
        label="交易类型"
        align="center"
        prop="bizType"
        width="100"
      >
        <template #default="scope">
          <dict-tag
            :options="bank_payment_biz_type"
            :value="scope.row.bizType"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="交易对象"
        align="center"
        prop="object"
        width="100"
      >
        <template #default="scope">
          <dict-tag :options="bank_payment_object" :value="scope.row.object" />
        </template>
      </el-table-column>
      <el-table-column
        label="交易对象编号"
        align="center"
        prop="objectNo"
        width="150"
      />
      <el-table-column
        label="交易银行"
        align="center"
        prop="gateway"
        width="100"
      />
      <el-table-column
        label="交易流水号"
        align="center"
        prop="paymentTradeNo"
        width="150"
      />
      <el-table-column
        label="交易金额"
        align="center"
        prop="amount"
        width="100"
      >
        <template #default="scope">
          {{ (Math.round(scope.row.amount) / 100).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column
        label="支付状态"
        align="center"
        prop="status"
        width="100"
      >
        <template #default="scope">
          <dict-tag :options="bank_payment_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        width="160"
      />
      <el-table-column
        label="完成时间"
        align="center"
        prop="callbackTime"
        width="160"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="View"
            @click="handleView(scope.row, scope.index)"
            >详细</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page.sync="queryParams.pageNum"
      v-model:limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
        <div>查看提现信息( <span style="color: red">*</span>表示为必填)</div>
        <br />
        <br />
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户简称" prop="companyName">
              <el-input v-model="form.companyName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="业务类型" prop="bizType">
              <el-select
                v-model="form.bizType"
                placeholder="业务类型"
                clearable
                style="width: 200px"
              >
                <el-option
                  v-for="dict in bank_payment_biz_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="交易对象" prop="objectZh">
              <el-input v-model="form.objectZh" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="对象编号" prop="objectNo">
              <el-input v-model="form.objectNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="交易流水号" prop="paymentTradeNo">
              <el-input v-model="form.paymentTradeNo" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="交易金额" prop="amountYuan">
              <el-input v-model="form.amountYuan" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="交易银行" prop="gateway">
              <el-input v-model="form.gateway" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="交易状态" prop="statusZh">
              <el-input v-model="form.statusZh" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="银行流水号" prop="gatewayTradeNo">
              <el-input v-model="form.gatewayTradeNo" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="交易完成时间" prop="callbackTime">
              <el-input v-model="form.callbackTime" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="通知业务系统" prop="notified">
              <el-input v-model="form.notified" :formatter="formatNotified" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="通知时间" prop="notifyTime">
              <el-input v-model="form.notifyTime" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="发起者" prop="createName">
              <el-input v-model="form.createName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="发起时间" prop="createTime">
              <el-input v-model="form.createTime" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="发起说明" prop="paymentTradeInfo">
          <el-input v-model="form.paymentTradeInfo" />
        </el-form-item>
        <el-row>
          <el-col :span="10">
            <el-form-item label="操作者" prop="operatorName">
              <el-input v-model="form.operatorName" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="操作时间" prop="operatorTime">
              <el-input v-model="form.operatorTime" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="操作说明" prop="callbackInfo">
          <el-input v-model="form.callbackInfo" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button v-if="isDetail" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryPageByParam,
  getPayment,
  delPayment,
  addPayment,
  updatePayment,
} from "@/api/bank/payment.js";

import { formatDate } from "@/utils/date";
import { getCurrentInstance } from "vue";
export default {
  setup() {
    // 获取当前组件实例
    const instance = getCurrentInstance();
    const { bank_payment_biz_type } = instance.proxy.useDict(
      "bank_payment_biz_type"
    );
    const { bank_payment_status } = instance.proxy.useDict(
      "bank_payment_status"
    );
    const { bank_payment_object } = instance.proxy.useDict(
      "bank_payment_object"
    );

    return {
      bank_payment_biz_type,
      bank_payment_status,
      bank_payment_object,
    };
  },
  name: "Payment",
  data() {
    return {
      isDetail: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      paymentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createTimes: ["", ""],
        startTime: "",
        endTime: "",
        startComplateTime: "",
        endComplateTime: "",
        ids: "",
        noStatus: null,
        complateTimes: ["", ""],
        companyName: null,
        companyCode: null,
        fullName: null,
        companyId: null,
        bizType: "DRAW",
        paymentType: null,
        object: null,
        objectId: null,
        objectNo: null,
        status: null,
        amount: null,
        gateway: null,
        bankid: null,
        createTime: null,
        createEmployeeId: null,
        callbackTime: null,
        callbackInfo: null,
        paymentTradeInfo: null,
        paymentTradeNo: null,
        gatewayTradeNo: null,
        refunedTradeNo: null,
        notified: null,
        notifyTime: null,
        operator: null,
        operatorTime: null,
        resultUrl: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
    };
  },
      watch: {
    "queryParams.complateTimes"(newVal){
        if(newVal == null){
          this.queryParams.complateTimes =['',''];
        }
      },
      "queryParams.createTimes"(newVal){
        if(newVal == null){
          this.queryParams.createTimes =['',''];
        }
      }
  },
  created() {
    this.getList();
  },
  methods: {
    formatNotified(value) {
      if ("TRUE" === value) {
        return "已通知";
      }
      if ("FALSE" === value) {
        return "未通知";
      }
      return value;
    },
    handleView(row) {
      this.open = true;
      // const selectedItem = this.oneGenrees.find(item => item.genreId === (row.oneGenreId+""));
      // if (selectedItem) {
      //   this.selectedItem = selectedItem.genreId;
      // }
      this.title = "查看提现信息";
      this.form = { ...row };
      // this.form.oneGenreId = row.oneGenreId + "";
      // this.loadTwoProductGenre(row.oneGenreId);
      // this.form.twoGenreId = row.twoGenreId + "";
      // this.form.banId = row.banId + "";
      // this.form.quanId = row.quanId + "";
      // this.form.bianseId = row.bianseId + "";
      // this.form.listPrice = (Math.round(row.listPrice) / 100).toFixed(2);
      // this.saleTypeList = row.saleType.split(',');
      this.isDetail = false;
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.queryParams.startTime =
        this.queryParams.createTimes[0] === ""
          ? this.queryParams.createTimes[0]
          : formatDate(this.queryParams.createTimes[0], "yyyy-MM-dd hh:mm:ss");
      this.queryParams.endTime =
        this.queryParams.createTimes[1] === ""
          ? this.queryParams.createTimes[1]
          : formatDate(this.queryParams.createTimes[1], "yyyy-MM-dd hh:mm:ss");

      this.queryParams.startComplateTime =
        this.queryParams.complateTimes[0] === ""
          ? this.queryParams.complateTimes[0]
          : formatDate(
              this.queryParams.complateTimes[0],
              "yyyy-MM-dd hh:mm:ss"
            );
      this.queryParams.endComplateTime =
        this.queryParams.complateTimes[1] === ""
          ? this.queryParams.complateTimes[1]
          : formatDate(
              this.queryParams.complateTimes[1],
              "yyyy-MM-dd hh:mm:ss"
            );
      queryPageByParam(this.queryParams).then((response) => {
        this.paymentList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        paymentId: null,
        companyId: null,
        bizType: null,
        paymentType: null,
        object: null,
        objectId: null,
        objectNo: null,
        status: null,
        amount: null,
        gateway: null,
        bankid: null,
        createTime: null,
        createEmployeeId: null,
        callbackTime: null,
        callbackInfo: null,
        paymentTradeInfo: null,
        paymentTradeNo: null,
        gatewayTradeNo: null,
        refunedTradeNo: null,
        notified: null,
        notifyTime: null,
        operator: null,
        operatorTime: null,
        resultUrl: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.paymentId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const paymentId = row.paymentId || this.ids;
      getPayment(paymentId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.paymentId != null) {
            updatePayment(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPayment(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const paymentIds = row.paymentId || this.ids;
      this.$modal
        .confirm(
          '是否确认删除编号为"' + paymentIds + '"的数据项？'
        )
        .then(function () {
          return delPayment(paymentIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "yanjing/payment/export",
        {
          ...this.queryParams,
        },
        `payment_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
